<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-row>
      <el-button @click="userLogin">用户登录</el-button>
      <el-button @click="getUserById">获取用户</el-button>
    </el-row>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      imageUrl: "",
      uploadUrl: "http://localhost:80/api/file/upload",
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response) {
      console.log("上传成功:", response);
    },
    handleError(error) {
      console.error("上传失败:", error);
    },
    handleProgress(event) {
      console.log("上传进度:", event.percent);
    },
    beforeUpload(file) {
      console.log("before upload, file", file);
      // const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      // return isJPG && isLt2M;
      return true;
    },
    userLogin() {
      axios
        .post("http://localhost:8080/api/user/login", {
          username: "admin",
          password: "123456",
        })
        .then((res) => {
          console.log("use login, res", res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getUserById() {
      axios
        .post("http://localhost:8080/api/user/getAllUserList")
        .then((res) => {
          console.log("get all user list, res", res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
